import React from 'react';
import {Flex, Steps, List, Icon, Card, WingBlank, WhiteSpace, Carousel, Toast, Modal, Button} from 'antd-mobile';
import './index.less';
import {Panel, Layout, TimeLine} from "../../components/index";

const Item = Flex.Item;
const Step = Steps.Step;

const customIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" className="am-icon am-icon-md">
    <g fillRule="evenodd" stroke="transparent" strokeWidth="4">
      <path d="M21 0C9.402 0 0 9.402 0 21c0 11.6 9.402 21 21 21s21-9.4 21-21C42 9.402 32.598 0 21 0z"/>
      <path fill="#FFF"
            d="M29 18.73c0-.55-.447-1-1-1H23.36l4.428-5.05c.407-.46.407-1.208 0-1.668-.407-.46-1.068-.46-1.476 0l-5.21 5.89-5.21-5.89c-.406-.46-1.067-.46-1.475 0-.406.46-.406 1.207 0 1.667l4.43 5.05H14.23c-.55 0-.998.45-.998 1 0 .554.448.97 1 .97h5.9v3.942h-5.9c-.552 0-1 .448-1 1s.448.985 1 .985h5.9v4.896c0 .552.448 1 1 1 .55 0 .968-.284.968-.836v-5.06H28c.553 0 1-.433 1-.985s-.447-1-1-1h-5.9v-3.94H28c.553 0 1-.418 1-.97z"/>
    </g>
  </svg>
);

class BindBank extends React.Component {

  constructor(props) {
    super(props);
    this.state = {}
  }

  componentDidMount() {

  }

  render() {
    return (
      <Layout className={'page-loanDetails'} history={this.props.history}>

        {/*总览*/}
        <Panel>
          <Flex className={'qBox'}>
            <div className={'qTitle'}>
              <div className={'tInfo'}>使用中的本金(元)</div>
              <div className={'tMoney'}>13,333.00</div>
            </div>
          </Flex>
        </Panel>


        {/*借款信息*/}
        <WingBlank size={'sm'}>
          <WhiteSpace/>
          <Panel bodyCls={'panelBody'} className={'panel'}>
            {/*借款详情的头部*/}
            <div className={'cHeader'}>
              <Flex className={'cHeaderInner'}>
                <Flex.Item className={'cTitle'}>
                  {/*<span className={'cTitleIcon'}>米</span>*/}
                  借款信息
                </Flex.Item>
              </Flex>
            </div>
            {/*借款详情的内容*/}
            <div className={'cBody'}>
              <WhiteSpace/>

              <Flex className={'line'}>
                <Item className={'label'}>借款金额：</Item>
                <Item className={'value'}><span>￥</span>5000.00</Item>
              </Flex>

              <Flex className={'line'}>
                <Item className={'label'}>借款日期：</Item>
                <Item className={'value'}>2016-04-12</Item>
              </Flex>

              <Flex className={'line'}>
                <Item className={'label'}>放款日期：</Item>
                <Item className={'value'}>2016-04-22</Item>
              </Flex>

              <Flex className={'line'}>
                <Item className={'label'}>借款期限：</Item>
                <Item className={'value'}>6个月(期）</Item>
              </Flex>

              <Flex className={'line'}>
                <Item className={'label'}>还款方式：</Item>
                <Item className={'value'}>等额本息</Item>
              </Flex>

              <Flex className={'line'}>
                <Item className={'label'}>借款人姓名：</Item>
                <Item className={'value'}>吴**</Item>
              </Flex>

              <Flex className={'line'}>
                <Item className={'label'}>借款人身份证：</Item>
                <Item className={'value'}>3325**********1802</Item>
              </Flex>

              <Flex className={'line'}>
                <Item className={'label'}>利率：</Item>
                <Item className={'value'}>0.5%</Item>
              </Flex>

              <Flex className={'line'}>
                <Item className={'label'}>服务费率：</Item>
                <Item className={'value'}>1.12%</Item>
              </Flex>

              <Flex className={'line'}>
                <Item className={'label'}>借款合同：</Item>
                <Item
                  style={{
                    color: "#33a3f4",
                    textDecoration: "underline"
                  }}
                  onClick={() => {
                    this.props.history.push('/contract');
                  }}
                  className={'value'}>查看</Item>
              </Flex>

              <WhiteSpace/>
            </div>
          </Panel>
        </WingBlank>


        {/*还款信息*/}
        <WingBlank size={'sm'}>
          <WhiteSpace/>
          {/*有记录*/}
          <Panel bodyCls={'panelBody'} className={'panel'}>
            {/*借款详情的头部*/}
            <div className={'cHeader'}>
              <Flex className={'cHeaderInner'}>
                <Flex.Item className={'cTitle'}>
                  还款明细
                </Flex.Item>
              </Flex>
            </div>
            {/*借款详情的内容*/}
            <div className={'cBody'}>
              <WhiteSpace/>

              <Flex className={'line'}>
                <Item className={'label'}>已还本金：</Item>
                <Item className={'value'}>2,499.96</Item>
              </Flex>
              <Flex className={'line'}>
                <Item className={'label'}>已还利息：</Item>
                <Item className={'value'}>266.77</Item>
              </Flex>
              <Flex className={'line'}>
                <Item className={'label'}>还款记录：</Item>
                <Item className={'value'}>查看</Item>
              </Flex>

              <WhiteSpace/>
            </div>
          </Panel>


        </WingBlank>
        <WhiteSpace/>


        {/*还款信息*/}
        <WingBlank size={'sm'}>
          <WhiteSpace/>
          {/*有记录*/}
          {/*无记录*/}
          <Panel bodyCls={'panelBodyNull'} className={'panelNull'}>
            无还款记录
          </Panel>
        </WingBlank>

        <WhiteSpace size={'lg'}/>

        {/*时间轴*/}
        <TimeLine/>

        <WhiteSpace/>
      </Layout>
    );
  }

}

BindBank.propTypes = {};

export default BindBank;
